<template>
  <div class="crash-report6">
    <el-form :inline="true">
      <el-form-item label="时间">
        <el-date-picker
          size="small"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format='yyyy-MM-dd'
          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" :loading="false" @click="getPageData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <div id="device-report2" style="width: 100%; height:450px;" v-loading="deviceLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import moment from 'moment'

  var yData = ['OPPO R9s', 'vivo X9s', 'vivo X9', '魅蓝 Note6', '小米 Mix2', '小米5', 'iPhone 8', 'iPhone 7', '华为 P10', '金立 M6', 'iPhone8 Plus', 'iPhone7 Plus', '荣耀V10', '华为 Mate10', '金立 S10', '三星 S8', 'OPPO R11', '三星 Note8', 'vivo XPlay', 'vivo X20', 'OPPO R11s', '三星 S7', '魅族 Pro7', '小米 Note3', 'iPhoneX']
  var resultData = [0.0050, 0.0075, 0.0077, 0.0088, 0.0146, 0.0158, 0.0161, 0.0171, 0.0173, 0.0173, 0.0174, 0.0176, 0.0184, 0.0192, 0.0195, 0.0196, 0.0196, 0.0204, 0.0228, 0.0267, 0.0281, 0.0283, 0.0318, 0.0326, 0.0335]

  export default {
    data () {
      return {
        dateRange: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD HH:mm:ss')],
        deviceLoading: false,
        chartsInstance: {
          device: ''
        },
        yData: yData,
        resultData: resultData
      }
    },
    activated () {
      this.getPageData()
      // this.initEcharts()
    },
    methods: {
      getPageData () {
        var vm = this
        var params = []
        var url = '/uba/getdeviceModel'
        vm.deviceLoading = true

        if (vm.dateRange !== null && vm.dateRange !== '') {
          var startTime = vm.dateRange[0]
          params.push('startTime=' + moment(startTime).format('YYYY-MM-DD'))

          var endTime = vm.dateRange[1]
          params.push('endTime=' + moment(endTime).format('YYYY-MM-DD'))
        }

        url += (params.length > 0 ? '?' + params.join('&') : '')
        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.yData = data.result.map(item => {
              return item.name
            })
            vm.resultData = data.result.map(item => {
              return (item.value * 1).toFixed(4)
            })
            vm.initEcharts()
          }
        })
      },
      initEcharts () {
        var vm = this
        vm.chartsInstance.device = echarts.init(document.getElementById('device-report2'))
        vm.getDeviceReport2()
        window.addEventListener('resize', () => {
          vm.chartsInstance.device.resize()
        })
      },
      getDeviceReport2 () {
        var vm = this
        let isShow = vm.resultData.length === 0
        var option = {
          title: [{
            text: '主流手机部分机型应用崩溃率'
          }, {
            show: isShow,
            text: '暂无数据',
            top: '40%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            // trigger: 'axis',
            // formatter: '{b}<br/>{a}: {c}%'
            formatter: function (params) {
              return params.marker + ' ' + params.name + ': ' + params.value + '%'
            }
          },
          grid: {
            left: '2%',
            right: '6%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            // interval: 0.0050,
            // min: 0,
            // max: 0.0350,
            axisLabel: {
              // formatter: '{value} %'
              formatter: function (value) {
                return value.toFixed(4) + '%'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              interval: 0
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: vm.yData.reverse()
          },
          series: [
            {
              name: '崩溃率',
              type: 'pictorialBar',
              symbol: 'rect',
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  formatter: '{c}%'
                }
              },
              itemStyle: {
                normal: {
                  // color: '#0C81C6'
                  color: '#4793C0'
                }
              },
              symbolRepeat: true,
              symbolSize: [6, 8],
              symbolMargin: 1,
              data: vm.resultData.reverse()
            }
          ]
        }
        vm.chartsInstance.device.setOption(option)
        vm.deviceLoading = false
      }
    }
  }
</script>
<style scoped>
.el-form{
  text-align: right;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.el-button{
  padding: 8px 15px;
  font-size: 14px;
}
</style>

